import React from 'react';
import ReactDOM from 'react-dom';
import FolderStore from "../stores/FolderStore";  
import OptionStore from "../stores/OptionStore";
import classNames from "classnames";
import _ from "lodash"

const ColOptionItem = React.createClass({      
    getInitialState: function () {
        return {
           checked : this.props.data.show              
        };
    },   
    shouldComponentUpdate: function(nextProps, nextState){          
        if (nextProps.data.show == this.state.checked){
            return false;            
        }
        if (nextState.checked == this.state.checked){
            return false;
        }
        return true;
    },
    componentDidMount: function(){                  
        $(ReactDOM.findDOMNode(this)).on("click", this.onClick);            
    },
    componentWillUnmount: function(){
        $(ReactDOM.findDOMNode(this)).off("click", this.onClick);   
    },
    onClick : function(event){
        event.stopPropagation(); 
        this.toggleChecked();
    },
    toggleChecked: _.debounce(function(){          
        this.checked(!this.state.checked); 
    }, 100),
    onChange: function(event){           
        this.checked(event.target.checked);          
    },       
    checked: function(bChecked){           
        this.setState({checked: bChecked});
        OptionStore.setColsOption({
            title: this.props.data.title,
            show: bChecked
        });
    },
    render: function(){          
        var data = this.props.data;
        return(
                <li>
                    <a href="javascript:void(0)">
                    <div className="checkbox-list">
                        <label>
                            <div className="checker">
                                <span className="checked"><input type="checkbox" onChange={this.onChange} checked={this.state.checked} className="input-small"/></span>
                            </div>
                            {data.title}
                        </label>
                    </div>
                    </a>
                </li>
            )
    }
});

export default React.createClass({
        getInitialState: function () {          
            return this.initState(this.props);
        },      
        initState: function(props){
            return {        
                curObject : props.data,
                isFolder : (props.data && props.data.type == 'cmis:folder')         
            };
        },
        componentWillReceiveProps: function(nextProps){
            this.setState(this.initState(nextProps));              
        },
        moveObject: function(){
            window.moveObject(this.props.data);
        },
        removeObject: function(){
            if (this.state.isFolder){
                window.removeFolder(this.props.data);
            }
            else{
                window.removeDocument(this.props.data);
            }
        },
        setAcl: function(){
            window.setAcl(this.props.data);
        },
        uploadNewVersion: function(){
            window.uploadNewVersion(this.props.data);
        },
        downDocument: function(){
            CMISService.downloadDocument(this.props.data.id);
        },
        downOriginalDocument: function(){
            CMISService.downOriginalDocument(this.props.data.id);
        },

        rename: function(){
            FolderStore.rename(this.props.data);
        },
        viewHistory: function(){
            window.viewHistory(this.props.data)
        },
        preview: function(){
            window.previewByDocumentId(this.props.data.id);
        },
        fillDoc: function(){
            window.fillDoc(this.props.data);
        },
        render: function () {   
            var data = this.props.data;
            var show_folder = {               
                hide: (!data || data.type !== 'cmis:folder')
            };
            var show_doc = {
                hide: (!data || data.type === 'cmis:folder'),             
            };
            var show_both = {
                hide: !data,             
            };

            var colItems = [];           
            _.each(this.props.colsOption, function(col){
                colItems.push(<ColOptionItem key={col.title} data={col}/>);
            })

            return (
                <div className="pull-right">
                <ul className="list-inline m-bot0 btn-m-right10">
                    <li className="active btn-group">
                        <i className="fa fa-sort-alpha-asc fa-lg bom" data-toggle="tooltip dropdown" title="Sort" aria-expanded="false"></i>
                        <ul className="bomb－box dropdown-menu dropdown-menu-r">
                            <li className="dropdown-menu-title">Sort Options</li>
                            <li>
                                <a href="#">
                                <label>
                                    <span className="btn-m-right10"><input type="radio" name="optionsRadios" id="sorting-method" value="option1"/></span>
                                    Last modified time（DESC）
                                </label>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <label>
                                        <span className="btn-m-right10"> <input type="radio" name="optionsRadios" id="sorting-method2" value="option1" /></span>
                                         Last modified time（ASC）
                                    </label>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <label>
                                        <span className="btn-m-right10"><input type="radio" name="optionsRadios" id="sorting-method3" value="option1" /></span>
                                        Name（DESC）
                                </label>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <label>
                                        <span className="btn-m-right10"><input type="radio" name="optionsRadios" id="sorting-method4" value="option1" /></span>
                                        Name（ASC）
                                    </label>
                                </a>
                            </li>
                            <li className="divider"></li>
                            <li className="dropdown-menu-title">Display Options</li>
                            {colItems}
                        </ul>
                    </li>
                    <li onClick={this.preview}  data-toggle="tooltip" className={classNames(show_doc)} title="Preview">
                        <i className="fa fa-eye fa-lg tooltips" data-original-title="Preview" data-placement="bottom"></i>
                    </li>
                    <li onClick={this.uploadNewVersion} className={classNames(show_doc)}>
                        <i className="fa fa-arrow-up fa-lg" data-toggle="tooltip" title="Upload new version"></i>
                    </li>
                    <li className={classNames(show_doc,"active btn-group")}>

                        <i className="fa fa-download fa-lg" data-toggle="tooltip dropdown" title="Download" aria-expanded="false"></i>
                        <ul className="dropdown-menu dropdown-menu-r">
                            <li onClick={this.downOriginalDocument}>
                                <a href="#">
                                    <i className="fa fa-file-o"></i>
                                          Download original format
                                </a>
                            </li>
                            <li onClick={this.downDocument}>
                                <a href="#">
                                    <i className="fa fa-lock"></i>
                                        Download protected copy
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li onClick={this.removeObject} className={classNames(show_both)}>
                        <i className="fa fa-trash-o fa-lg" data-toggle="tooltip" title="Delete"></i>
                    </li>       
                    <li onClick={this.moveObject} className={classNames(show_folder)}>
                         <i className="fa fa-sign-out fa-lg" data-toggle="tooltip" title="Move To"></i>
                    </li>  
                    <li onClick={this.rename} className={classNames(show_folder)}>                              
                        <i className="fa fa-circle fa-lg" data-toggle="tooltip" title="Rename"></i>
                    </li>
                    <li onClick={this.setAcl} className={classNames(show_folder)}>
                         <i id="setAcl" className="fa fa-users fa-lg" data-toggle="tooltip" title="Access Control"></i>
                    </li>                           
                    <li className={classNames(show_doc, "btn-group")}>
                        <i className="fa fa-ellipsis-h fa-lg" title="more" data-toggle="tooltip dropdown" aria-expanded="false"></i>
                        <ul className="dropdown-menu dropdown-menu-r">
                            <li onClick={this.fillDoc} className={classNames(show_doc)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-files-o"></i>
                                    <span>Archive to</span>
                                </a>
                            </li>
                            <li className={classNames(show_doc)}>
                                <a onClick={this.moveObject}>
                                    <i className="fa fa-sign-out"></i>
                                    <span>Move to</span>
                                </a>
                            </li>
                            <li onClick={this.rename} className={classNames(show_doc)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-circle"></i>
                                    <span>Rename</span>
                                </a>
                            </li>
                            <li className={classNames(show_folder)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-users"></i>
                                    <span>Access control</span>
                                </a>
                            </li>
                            <li className={classNames(show_doc)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-edit"></i>
                                    <span>Classification and indexing</span>
                                </a>
                            </li>
                            <li onClick={this.viewHistory}  className={classNames(show_doc)}>
                                <a href="#view-history" data-toggle="modal">
                                    <i className="fa fa-tachometer"></i>
                                    <span>Manage versions</span>
                                </a>
                            </li>
                            <li className={classNames(show_doc)}>
                                <a href="javascript:void(0)">
                                    <i className="fa fa-cogs"></i>
                                    <span>Secure share</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li className="border-left">
                        <i className="fa fa-exclamation-circle fa-lg btn_hide_split_view_master_wrap m-left10" title="hide details"></i>
                    </li>
                </ul>
                </div>
            )
        }
}); 